<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      工单确认
    </div>
    <div style="width: 100%;font-size: 16px">
      维修报价信息
    </div>
    <table border="1px" id="table">
      <tr>
        <th>费用类型</th>
        <th>配件名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>总计</th>
      </tr>
      <tr v-for="item in quotationList" :key="item.id">
        <td>{{item.costType}}</td>
        <td>{{item.accessoryName}}</td>
        <td>{{item.accessoryNumber}}</td>
        <td>{{item.accessoryPrice}}</td>
        <td>{{item.totalPrice}}</td>
      </tr>
      <tr>
        <td>合计</td>
        <td></td>
        <td></td>
        <td></td>
        <td>{{gentle}}</td>
      </tr>
    </table>

    <div style="margin-top: 100px;">
      <van-button id="button" @click="toHead()">取 消</van-button>
      <van-button id="button" @click="toPass()" type="info">通 过</van-button>
      <van-button id="button" @click="toReject()" type="danger">驳 回</van-button>
    </div>

    <van-popup style="width:80%;height: 380px;" v-model="show1">
    <div>
      <div style="margin-top: 15px;margin-right: -240px">
        <van-icon color="blue" size="20px" name="cross"/>
      </div>

      <div style="margin-left: -40px">
        <h3>你对工单处理结果满意吗?</h3>
      </div>

      <div style="margin-left: -80px">
        <span>评分:</span>
        <van-rate
            v-model="form.repairScore"
            :size="25"
            title="评分"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
        />
      </div>

      <div style="margin-top: 20px">
        <p style="margin-left: -220px">评价:</p>
        <div style="margin-left: 20px">
          <van-field
              v-model="form.repairEvaluate"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入"
              border:true
              show-word-limit
              :style="{ border: '1px solid #ccc',width: '90%',}"
          />
        </div>
      </div>
      <div style="margin-top: 40px">
        <van-button style="margin-left: -0px;width: 60px;height: 30px" @click="show1 = false">取消</van-button>
        <van-button style="margin-left: 20px;width: 60px;height: 30px" type="info" @click="pass()">确认</van-button>
      </div>
    </div>
  </van-popup>

    <van-popup style="width:80%;height: 380px;" v-model="show2">
      <div>
        <div style="margin-top: 15px;margin-right: -240px">
          <van-icon color="blue" size="20px" name="cross"/>
        </div>

        <div style="margin-left: -40px">
          <h3 style="color: blue">驳回</h3>
        </div>

        <div style="margin-top: 20px">
          <p style="margin-left: -220px">驳回原因:</p>
          <div style="margin-left: 20px">
            <van-field
                v-model="pojo.rejectReason"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入"
                border:true
                show-word-limit
                :style="{ border: '1px solid #ccc',width: '90%',}"
            />
          </div>
        </div>
        <div style="margin-top: 40px">
          <van-button style="margin-left: -0px;width: 60px;height: 30px" @click="show1 = false">取消</van-button>
          <van-button style="margin-left: 20px;width: 60px;height: 30px" type="info" @click="reject()">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      id:'',
      quotationList:[],
      gentle:0,
      show1:false,
      show2:false,
      form:{},
      pojo:{},
    }
  },
  methods:{
    reject(){
      this.pojo.id = this.id;
      axios.post("http://localhost:9999/myModule-service/myRepair/updateReject",this.pojo).then(res=>{
        this.$toast("处理完成");
        this.toHead();
      })
    },
    toReject(){
      this.show2 = true;
    },
    pass(){
      this.form.id = this.id;
      axios.post("http://localhost:9999/myModule-service/myRepair/updateRepair",this.form).then(res=>{
        this.$toast("处理完成");
        this.toHead();
      })
    },
    toPass(){
      this.show1 = true;
    },
    findAll(){
      axios.post("http://localhost:9999/myModule-service/repairQuotation/findAll?id="+this.id).then(res=>{
        this.quotationList = res.data;
        for (let i=0;i<this.quotationList.length;i++){
          this.gentle += this.quotationList[i].totalPrice;
        }
      })
    },
    toHead(){
      this.$router.push({
        path:'/repairDetail',
        query:{
          id:this.id
        }
      })
    }
  },
  created(){
    this.id = this.$route.query.id;
    this.findAll();
  }
}
</script>

<style scoped>
#button{
  padding: 15px;
  margin: 10px;
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
#table{
  width: 340px;
  margin-top: 10px;
  margin-left: 20px;
  border-collapse: collapse;
}
.ticket-code{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #323233;
}
.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  color: #323233;
  border-bottom: 1px solid #ebedf0;
  margin-left: 15px;
  margin-right: 15px;
}
</style>
